<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            overflow: hidden;
        }
        
        .bg {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            background: url(images/3aa3b1a332986b5744d7bbb4a82cab443cd71a1c.jpg);
            left: 0;
            background-size: cover;
            /* position: fixed; */
        }
    </style>

</head>

<body>

    <div class="bg">

    </div>

</body>

<script>
    var bg = document.getElementsByClassName('bg');


    var i = 0;
    var sc = 1;

    function a(e) {
        bg[0].style.transition = 'none';
        i = i + 0.4;
        sc = sc + 0.01;
        console.log(i);
        bg[0].style.filter = 'blur(' + i + 'px)';
        bg[0].style.transform = 'scale(' + sc + ')';

    }
    window.addEventListener('mousedown', function() {
        window.addEventListener('mousemove', a)
    });
    window.addEventListener('mouseup', function() {
        this.removeEventListener('mousemove', a)
        bg[0].style.filter = 'blur(' + 0 + 'px)';
        bg[0].style.transform = 'scale(' + 1 + ')';
        bg[0].style.transition = 'all 0.5s ease-in-out';
        i = 0;
        sc = 1;
    });
</script>


</html>